<template>
    <div class="wrap">
        <Card>
            <div class="wrap-card">
                <Form ref="formItem" :model="formItem" :rules="ruleValidate" :label-width="100">
                    <Row>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="商品名称" prop="ProName">
                                <i-input v-model="formItem.ProName" placeholder="请输入商品名称"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="生产厂家" prop="FactoryID">
                                <AsyncSelect
                                    v-if="isAsyncSelect"
                                    :theWay="'get'"
                                    :currentModel="formItem.Supplier"
                                    :url="'Supplier/AllType?type=4'"
                                    :value="'Supplier'"
                                    @setDictionaries="setDictionaries"
                                ></AsyncSelect>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="销售单位" prop="UnitSales">
                                <i-input v-model="formItem.UnitSales" placeholder="请输入销售单位"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="原价" prop="PriceOld">
                                <input
                                    type="number"
                                    oninput="if(value.length>13)value=value.slice(0,13)"
                                    v-model="formItem.PriceOld"
                                    class="style-input"
                                    placeholder="请输入原价"
                                >
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="商品简称" prop="ShortName">
                                <i-input v-model="formItem.ShortName" placeholder="请输入商品简称"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="供应商" prop="SupplierID">
                                <AsyncSelect
                                    v-if="isAsyncSelect"
                                    :currentModel="formItem.SupplierID"
                                    :url="'Supplier/GetAllGridJson'"
                                    :value="'SupplierID'"
                                    @setDictionaries="setDictionaries"
                                ></AsyncSelect>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="进货单位" prop="UnitBuy">
                                <i-input v-model="formItem.UnitBuy" placeholder="请输入进货单位"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="现价" prop="PriceNew">
                                <input
                                    type="number"
                                    oninput="if(value.length>13)value=value.slice(0,13)"
                                    v-model="formItem.PriceNew"
                                    class="style-input"
                                    placeholder="请输入现价"
                                >
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="供货货号" prop="SupCode">
                                <i-input v-model="formItem.SupCode" placeholder="请输入供货货号"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="品牌列表" prop="BrandID">
                                <AsyncSelect
                                    v-if="isAsyncSelect"
                                    :url="'Brand/GetAllGridJson'"
                                    :value="'BrandID'"
                                    :typeOf="'brand'"
                                    :currentModel="formItem.BrandID"
                                    @setDictionaries="setDictionaries"
                                ></AsyncSelect>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="包装细数" prop="UnitCount">
                                <input
                                    type="number"
                                    oninput="if(value.length>13)value=value.slice(0,13)"
                                    v-model="formItem.UnitCount"
                                    class="style-input"
                                    placeholder="5盒为一箱 / 细数为5"
                                >
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="佣金">
                                <input type="number" v-model="formItem.Commission" class="style-input" placeholder="请输入佣金">
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="批准文号">
                                <input v-model="formItem.StdDocID" class="style-input" placeholder="请输入批准文号">
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="商品分类" prop="categoriesList">
                                <Cascader :data="categoriesList" v-model="categoriesListValue" placeholder="请选择商品分类"></Cascader>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="商品规格" prop="Spec">
                                <i-input v-model="formItem.Spec" placeholder="请输入商品规格"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="积分兑换" prop="PayByPoint">
                                <input
                                    type="number"
                                    oninput="if(value.length>13)value=value.slice(0,13)"
                                    v-model="formItem.PayByPoint"
                                    class="style-input"
                                    placeholder="兑换所需积分"
                                >
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="条形码" prop="BarCode">
                                <i-input v-model="formItem.BarCode" placeholder="请输入条形码"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="使用方式">
                                <Select v-model="formItem.Method" style="width:100%;">
                                    <Option :value="1">口服</Option>
                                    <Option :value="2">外用</Option>
                                    <Option :value="3">注射针剂</Option>
                                    <Option :value="4">注射液体</Option>
                                </Select>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="保质期(天)" prop="ShelfLife">
                                <input
                                    type="number"
                                    oninput="if(value.length>13)value=value.slice(0,12)"
                                    v-model="formItem.ShelfLife"
                                    class="style-input"
                                    placeholder="请输入保质期"
                                >
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="警戒库存" prop="StockWarn">
                                <input
                                    type="number"
                                    oninput="if(value.length>13)value=value.slice(0,13)"
                                    v-model="formItem.StockWarn"
                                    class="style-input"
                                    placeholder="请输入警戒库存"
                                >
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="拼音码">
                                <i-input v-model="formItem.PinYinCode" placeholder="请输入拼音码"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="药品类别">
                                <Select v-model="formItem.MerType" style="width:100%;">
                                    <Option value="01">处方药</Option>
                                    <Option value="02">非处方药</Option>
                                    <Option value="03">中药饮片</Option>
                                    <Option value="04">中药材</Option>
                                    <Option value="05">中成药</Option>
                                    <Option value="06">保健品</Option>
                                    <Option value="07">计生用品</Option>
                                    <Option value="08">医疗器械</Option>
                                    <Option value="09">非药品</Option>
                                    <Option value="10">其他医药用品</Option>
                                </Select>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="单次剂量" prop="Dose">
                                <i-input v-model="formItem.Dose" placeholder="请输入单次剂量"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="虚拟销量" prop="ShowCount">
                                <input
                                    type="number"
                                    oninput="if(value.length>13)value=value.slice(0,12)"
                                    v-model="formItem.ShowCount"
                                    class="style-input"
                                    placeholder="请输入虚拟销量"
                                >
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="顺序号" prop="ShowSort">
                                <input
                                    type="number"
                                    oninput="if(value.length>13)value=value.slice(0,12)"
                                    v-model="formItem.ShowSort"
                                    class="style-input"
                                    placeholder="请输入显示顺序"
                                >
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="销售季节">
                                <Select v-model="formItem.Season" style="width:100%;" placeholder="公司类别">
                                    <Option value="1">春季</Option>
                                    <Option value="2">夏季</Option>
                                    <Option value="3">秋季</Option>
                                    <Option value="4">冬季</Option>
                                    <Option value="5">全季</Option>
                                </Select>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="用药频次">
                                <i-input v-model="formItem.Rate" placeholder="请输入用药频次"></i-input>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="顶部轮播">
                                <img-upload
                                    v-if="isImg"
                                    :defaultList="imgDefaultList.PictureTop"
                                    @delImgList="delImgList"
                                    :multiple="true"
                                    :data="{directory:'OrgPath'}"
                                    :check="3"
                                    :value="'PictureTop'"
                                    @setImgLIst="setImgLIst"
                                ></img-upload>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="列表图">
                                <img-upload
                                    v-if="isImg"
                                    :defaultList="imgDefaultList.PictureList"
                                    @delImgList="delImgList"
                                    :multiple="false"
                                    :data="{directory:'OrgPath'}"
                                    :value="'PictureList'"
                                    :check="1"
                                    @setImgLIst="setImgLIst"
                                ></img-upload>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="小图">
                                <img-upload
                                    v-if="isImg"
                                    :defaultList="imgDefaultList.PictureSmall"
                                    @delImgList="delImgList"
                                    :multiple="false"
                                    :data="{directory:'OrgPath'}"
                                    :value="'PictureSmall'"
                                    :check="1"
                                    @setImgLIst="setImgLIst"
                                ></img-upload>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col :lg="{ span: 24}">
                            <FormItem label="属性">
                                <RadioGroup v-model="formItem.IsVirtual">
                                    <Radio label="false">实物</Radio>
                                    <Radio label="true">虚拟</Radio>
                                </RadioGroup>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 24}">
                            <FormItem label="状态">
                                <RadioGroup v-model="formItem.State">
                                    <Radio label="1">上架</Radio>
                                    <Radio label="0">下架</Radio>
                                </RadioGroup>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col :lg="{ span: 20}">
                            <FormItem label="内容">
                                <editor ref="editor" :value="content" @on-change="handleChange"/>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col :lg="{ span: 20}">
                            <FormItem label="简述" prop="ShortDes">
                                <i-input type="textarea" v-model="formItem.ShortDes" placeholder="请输入简述"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 20}">
                            <FormItem label="关键词" prop="KeyWords">
                                <i-input v-model="formItem.KeyWords" placeholder="请输入关键词"></i-input>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <FormItem>
                            <i-col :lg="{ span: 2}">
                                <Button @click="closePage">取消</Button>
                            </i-col>
                            <i-col :lg="{ span: 2}">
                                <Button type="primary" @click="handleSubmit('formItem')">提交</Button>
                            </i-col>
                        </FormItem>
                    </Row>
                </Form>
            </div>
        </Card>
    </div>
</template>
<script>
/**
 * 商品新建 编辑
 */
import { segmentation } from '@/util';
import ImgUpload from '@/components/ImgUpload';
import AsyncSelect from '@/components/AsyncSelect';
import Editor from '@/components/Editor';
import Api from './service';

export default {
    name: 'ProductListJump',
    components: {
        ImgUpload,
        AsyncSelect,
        Editor
    },
    data() {
        /* 供应商校验 */
        const validatorSupplierID = (rule, value, callback) => {
            setTimeout(() => {
                if (this.formItem.SupplierID == '' || !this.formItem.SupplierID) {
                    callback(new Error('请选择所属供应商'));
                } else {
                    callback();
                }
            }, 100);
        };
        /* 品牌校验 */
        const validatorBrandID = (rule, value, callback) => {
            setTimeout(() => {
                if (this.formItem.BrandID == '' || !this.formItem.BrandID) {
                    callback(new Error('请选择品牌'));
                } else {
                    callback();
                }
            }, 100);
        };
        /* 商品分类校验 */
        const validatorCategoriesList = (rule, value, callback) => {
            if (this.categoriesListValue.length == 0) {
                callback(new Error('请选择商品分类'));
            } else {
                callback();
            }
        };
        return {
            /**
             *  content 富文本model
             *  categoriesList 商品分类数据
             *  categoriesListValue 商品分类model
             *  imglist 图片数据
             *  imgDefaultList 图片默认展示
             *  formItem 表单数据
             *  ruleValidate 表单校验
             *  isImg 图片显示
             */
            content: '',
            isImg: false,
            categoriesList: [],
            categoriesListValue: [],
            isAsyncSelect: false,
            imglist: {
                PictureTop: [],
                PictureList: [],
                PictureSmall: []
            },
            imgDefaultList: {
                PictureTop: [],
                PictureList: [],
                PictureSmall: []
            },
            formItem: this.initFormItem(),
            ruleValidate: {
                SupplierID: [
                    {
                        required: true,
                        validator: validatorSupplierID,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                BrandID: [{ required: true, validator: validatorBrandID, message: '请选择不可为空', trigger: 'change' }],
                categoriesList: [
                    { required: true, validator: validatorCategoriesList, message: '请选择不可为空', trigger: 'change' }
                ],
                ProName: [{ required: true, message: '请输入不可为空', trigger: 'change' }],
                ShortName: [{ required: true, message: '请输入不可为空', trigger: 'change' }],
                PriceOld: [{ required: true, message: '请输入不可为空', trigger: 'change' }],
                PayByPoint: [{ required: true, message: '请输入不可为空', trigger: 'change' }],
                PriceNew: [{ required: true, message: '请输入不可为空', trigger: 'change' }],
                Commission: [{ required: true, message: '请输入不可为空', trigger: 'change' }]
            }
        };
    },
    mounted() {
        this.changeContent('');
        const { id } = this.$route.params;
        Api.getcategoriesList().then(res => {
            this.categoriesList = res.data;
        });
        if (id > 0) {
            Api.getItemInfo({
                id
            }).then(res => {
                this.formItem = {
                    ...res.data,
                    SupplierID: res.data.SupplierID + '',
                    Status: res.data.Status + '',
                    BrandID: res.data.BrandID + '',
                    IsVirtual: res.data.IsVirtual + '',
                    State: res.data.State + '',
                    PriceOld: res.data.PriceOld + '',
                    PayByPoint: res.data.PayByPoint + '',
                    PriceNew: res.data.PriceNew + '',
                    Commission: res.data.Commission + ''
                };
                res.data.TypeOne && this.categoriesListValue.push(res.data.TypeOne);
                res.data.TypeTwo && this.categoriesListValue.push(res.data.TypeTwo);
                res.data.TypeThree && this.categoriesListValue.push(res.data.TypeThree);
                this.isAsyncSelect = true;
                this.$refs.editor.setHtml(res.data.Detail);
                this.setImgDefaultList(res);
            });
        } else {
            this.isImg = true;
            this.isAsyncSelect = true;
            this.formItem = this.initFormItem();
        }
    },
    methods: {
        /* 关闭页面 */
        closePage() {
            this.$router.go(-1);
        },
        /* 改变富文本 */
        changeContent(data) {
            this.$refs.editor.setHtml(data);
        },
        /* 富文本改变 */
        handleChange(html) {
            this.formItem.Detail = html;
        },
        /* 图片上传 */
        setImgLIst(list, value) {
            this.imglist[value] = list;
        },
        /* 图片删除 */
        delImgList(list, value) {
            this.imglist[value] = list;
        },
        /* 供应商选择 */
        setDictionaries(item, value) {
            this.formItem[value] = item.ID + ' ';
        },
        /* 设置图片 */
        async setImgDefaultList(res) {
            if (res.data.PictureTop.length > 0) {
                const PictureTop = res.data.PictureTop.split(',');
                for (let item in PictureTop) {
                    this.imgDefaultList.PictureTop.push({
                        url: PictureTop[item]
                    });
                    this.imglist.PictureTop.push({
                        url: PictureTop[item]
                    });
                }
            }
            if (res.data.PictureList.length > 0) {
                this.imgDefaultList.PictureList.push({
                    url: res.data.PictureList
                });
                this.imglist.PictureList.push({ url: res.data.PictureList });
            }
            if (res.data.PictureSmall.length > 0) {
                this.imgDefaultList.PictureSmall.push({
                    url: res.data.PictureSmall
                });
                this.imglist.PictureSmall.push({ url: res.data.PictureSmall });
            }
            this.isImg = true;
        },
        /* 提交 */
        handleSubmit(name) {
            this.$refs[name].validate(valid => {
                this.formItem = {
                    ...this.formItem,
                    PictureTop: [],
                    PictureSmall: [],
                    PictureList: []
                };
                const { PictureTop, PictureSmall, PictureList } = this.imglist;
                for (let item in PictureTop) {
                    this.formItem.PictureTop.push(PictureTop[item].url);
                }
                for (let item in PictureSmall) {
                    this.formItem.PictureSmall.push(PictureSmall[item].url);
                }
                for (let item in this.imglist.PictureList) {
                    this.formItem.PictureList.push(PictureList[item].url);
                }
                let data = {
                    ...this.formItem,
                    PictureTop: segmentation(this.formItem.PictureTop),
                    PictureSmall: segmentation(this.formItem.PictureSmall),
                    PictureList: segmentation(this.formItem.PictureList),
                    TypeOne: this.categoriesListValue[0] ? this.categoriesListValue[0] : null,
                    TypeTwo: this.categoriesListValue[1] ? this.categoriesListValue[1] : null,
                    TypeThree: this.categoriesListValue[2] ? this.categoriesListValue[2] : null
                };
                if (valid) {
                    Api.addTablesItem(data).then(res => {
                        if (res.state == 'success') {
                            this.$Message.success('操作成功');
                            this.$router.go(-1);
                        } else {
                            this.$Message.error(res.message);
                        }
                    });
                }
            });
        },
        /* 表单数据 */
        initFormItem() {
            return {
                SupplierID: '',
                ShortName: '',
                SupCode: '',
                BarCode: '',
                PriceOld: 0,
                UnitBuy: '',
                UnitSales: '',
                PriceNew: 0,
                BrandID: '',
                PayByPoint: 0,
                Commission: 0,
                UnitCount: 0,
                Spec: '',
                ShelfLife: null,
                StockWarn: 0,
                PictureTop: [],
                Detail: '',
                PictureList: [],
                PictureSmall: [],
                ShowCount: 0,
                ShowSort: 0,
                IsVirtual: 'false',
                State: '1',
                Season: '5',
                ShortDes: '',
                Dose: '',
                Rate: '',
                StdDocID: '',
                PinYinCode: '',
                Method: 1,
                KeyWords: '',
                ProName: ''
            };
        }
    }
};
</script>

<style>
</style>

<style lang="less" scoped>
.wrap-card {
    height: 80vh;
    overflow-y: scroll;
    padding: 20px;
}
</style>

